<script setup>
import router from '@/router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useAdmerStore } from '@/stores/admerStore';
import { queryOrderAPI, getRefundMsgAPI, queryRefundListAPI } from '@/apis/admer'
import {
    getOrderDetailsAPI,
    getRefundListByContentAPI,
    getRefundListByStateAndContentAPI,
    refuteRefundAPI,
    agreeRefundAPI
} from '@/apis/order';

const selectorR = ref(0)
const refundList = ref([])
const visable3 = ref(0);
const refundMsg = ref({})
const content = ref("")
const queryRefundList = async () => {
    if (selectorR.value == 0) {
        const res = await getRefundListByContentAPI(content.value)
        refundList.value = res.data
        console.log(refundList.value);
        return
    }
    const res = await getRefundListByStateAndContentAPI(content.value, selectorR.value);
    refundList.value = res.data
    console.log((refundList.value));
}
onMounted(async () => {
    await queryRefundList()
})

const checkRefund = (oid) => {
    ElMessageBox.confirm("是否通过该申请?", "",
        {
            confirmButtonText: "退款",
            cancelButtonText: "驳回"
        }).then(() => {
            agreeRefund(oid)
        }).catch(() => {
            refutRefund(oid)
        })
}
const refutRefund = async (oid) => {
    await refuteRefundAPI(oid)
    ElMessage({ type: 'success', message: '申请已驳回' })
    queryRefundList()
    visable3.value = 0;
}
const agreeRefund = async (oid) => {
    await agreeRefundAPI(oid)
    ElMessage({ type: 'success', message: '金额已退还' })
    queryRefundList()
    visable3.value = 0;
}

//商品详情
const visable = ref(0);
const details = ref({
    tolPrice: 0,
    discount: 0,
    payment: 0,
    goodsList: []
})
const showDetails = async (oid) => {
    visable.value = 1
    const res = await getOrderDetailsAPI(oid);
    details.value = res.data;
}

const stateR = ref([
    "待审核",
    "已退款",
    "已驳回"
])
</script>
<template>
    <el-main>
        <el-select v-model="selectorR" style="box-shadow:-5px 5px 5px 0px #cdcdcd ;" @change="queryRefundList()">
            <el-option label="全部" :value="0"> </el-option>
            <el-option label="待审核" :value="1"> </el-option>
            <el-option label="已退款" :value="2"> </el-option>
            <el-option label="已驳回" :value="3"> </el-option>
        </el-select>
        <el-input style="width: 300px;box-shadow:0px 5px 5px 0px #cdcdcd ;" v-model="oidR"></el-input>
        <el-button type="primary" @click="queryRefundList()">查询</el-button>
        <p style="display: inline-block;margin-left: 20px;color:#666666">共&nbsp;{{ refundList.length }}&nbsp;条订单
        </p>
        <el-table :data="refundList" :border="true"
            style="box-shadow:0 10px 5px 5px #cdcdcd ;width: 100% ;height:500px ;overflow:auto;">
            <el-table-column prop="oid" align="center" label="订单编号" width="150px" />
            <el-table-column prop="uid" align="center" label="用户编号" width="150px" />
            <el-table-column prop="reason" align="center" label="退款原因" />

            <el-table-column label="订单详情" width="100px" align="center">
                <template #default="scope">
                    <el-link @click="showDetails(scope.row.oid)">查看</el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="审核状态" width="150px">
                <template #default="scope">
                    {{
                        stateR[scope.row.agree]
                    }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="120px">
                <template #default="scope">
                    <el-button v-if="scope.row.agree == 0" type="success" plain size="small"
                        @click="checkRefund(scope.row.oid); ">审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 退款审核 -->
        <el-dialog v-model="visable3" title="退款审核" style="width: 500px;">
            <el-descriptions title="" :column="1" style="width: 400px;" label-width="150px">
                <el-descriptions-item label="退款金额：">
                    ￥{{ refundMsg.payment }}
                </el-descriptions-item>
                <el-descriptions-item label="退款原因：">
                    {{ refundMsg.reason }}
                </el-descriptions-item>
                <el-descriptions-item label="操作：">

                    <el-button @click="refutRefund(refundMsg.oid)">驳回</el-button>
                    <el-button @click="agreeRefund(refundMsg.oid)">通过</el-button>

                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <!-- 商品详情 -->
        <el-dialog v-model="visable" title="商品详情" style="width: 1000px;">
            <el-descriptions title="金额明细" :column="2" style="width: 800px;">
                <el-descriptions-item label="商品件数：">
                    {{ details.goodsList.length }}件
                </el-descriptions-item>

                <el-descriptions-item label="商品总价：">
                    ￥{{ details.tolPrice }}
                </el-descriptions-item>

                <el-descriptions-item label="优惠减免：">
                    ￥{{ details.discount }}￥
                </el-descriptions-item>

                <el-descriptions-item label="实际支付：">
                    <p style="font-size: 20px;display: inline-block;color:brown">
                        ￥{{ details.payment }}
                    </p>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="商品信息" style="width: 700px;">
                <el-descriptions-item>
                    <el-table :data="details.goodsList">
                        <el-table-column label="商品编号" prop="gid" width="150px" />
                        <!-- 商品信息 -->
                        <el-table-column label="商品信息" width="250px" align="center">
                            <template #default="scope">
                                <div style="display: flex;align-items: center; width: 320px;">
                                    <el-image :src="scope.row.good.src" style="width:100px;height: 100px;"></el-image>
                                    <p style="margin-left:10px ;text-align: left;color:#666666;font-size: 16px;;">
                                        {{
                                            scope.row.good.gname }}
                                    </p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="单价" width="200px" align="center">
                            <template #default="scope">
                                <p style="text-align: center;">￥{{ scope.row.good.price }}</p>
                            </template>
                        </el-table-column>
                        <!-- 数量 -->
                        <el-table-column label="数量" width="180px" align="center">
                            <template #default="scope">
                                <p style="text-align: center;">x{{ scope.row.count }}</p>
                            </template>
                        </el-table-column>
                        <!-- 总价 -->
                        <el-table-column label="总价" width="180px" align="center">
                            <template #default="scope">
                                <p style="text-align: center;color:brown">￥{{ scope.row.tolPrice
                                }}
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </el-main>
</template>